<template>
      <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                {{$t('transactiontime')}}
                <el-date-picker :placeholder="$t('plsset')" v-model="transTime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                <span class="span-bottom">
                    {{$t('mertnam')}}
                    <el-input v-model.trim="selpaydetForm.merName" :placeholder="$t('plsipt')" size="mini"></el-input>
                        {{$t('mertid')}}
                    <el-input v-model.trim="selpaydetForm.merId" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                {{$t('trstyp')}}
                 <el-select v-model="selpaydetForm.transType" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('settmoney')" value="SETTLE_PAY"></el-option>
                    <el-option :label="$t('servchrg')" value="FEE"></el-option>
                    <el-option :label="$t('refund')" value="REFUND"></el-option>
                    <el-option :label="$t('collthesingle')" value="ACCEPT"></el-option>
                    <el-option :label="$t('settlement')" value="SETTLE"></el-option>
                    <el-option :label="$t('tranacc')" value="TRANSFER"></el-option>
                    <el-option :label="$t('correct')" value="REVERSE"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachPaydet" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="index" :data="selpaydetailsTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" min-width="121">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('mertid')" min-width="150">
                </el-table-column>
                <el-table-column prop="accType" :label="$t('acctype')" min-width="140">
                </el-table-column>
                <el-table-column prop="transType" :label="$t('trstyp')" min-width="127">
                </el-table-column>
                <el-table-column prop="amt" :label="$t('trastamt')" min-width="145">
                </el-table-column>
                <el-table-column prop="afterAmt" :label="$t('balaftertrans')" min-width="103">
                </el-table-column>
                <el-table-column prop="completeTime" :label="$t('transactiontime')" min-width="145">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="getDetail(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selpaydetForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selpaydetForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getmeracctranslist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
export default {
  data () {
    return {
      total: 0,
      selpaydetForm: {
        accType: null,
        intOutFlag: null,
        merId: null,
        merName: null,
        orderParam: null,
        orderParamIdx: 0,
        orderType: 0,
        startTime: null,
        endTime: null,
        transBusType: null,
        transType: null,
        pageNum: 1,
        pageSize: 10
      },
      selpaydetailsTab: [],
      transTime: []
    }
  },
  methods: {
    getPaydet () {
        getmeracctranslist(JSON.stringify(this.selpaydetForm)).then(res => {
            if (res.data.code === '000000') {
                this.total = res.data.data.total - 0
                for (let i = 0; i < res.data.data.list.length; i++) {
                    let key = res.data.data.list[i]
                    if (key.accType === 'CLEARING') key.accType = this.$t('clearacc')
                    if (key.accType === 'SETTLE') key.accType = this.$t('setacc')
                    if (key.accType === 'RECHARGE') key.accType = this.$t('rechargeacc')
                    if (key.accType === 'FROZEN') key.accType = this.$t('frozenacc')
                    if (key.accType === 'SHARE_PROFIT') key.accType = this.$t('dividendsacc')
                    if (key.accType === 'LOCKED') key.accType = this.$t('lockacc')
                    if (key.accType === 'REFUND_LOCKED') key.accType = this.$t('refundlockaccount')
                    if (key.accType === 'SETTLE_LOCKED') key.accType = this.$t('settlementlockaccount')
                    if (key.accType === 'FEE_IN') key.accType = this.$t('commissionacc')
                    if (key.transType === 'SETTLE_PAY') key.transType = this.$t('settmoney')
                    if (key.transType === 'FEE') key.transType = this.$t('servchrg')
                    if (key.transType === 'REFUND') key.transType = this.$t('refund')
                    if (key.transType === 'ACCEPT') key.transType = this.$t('collthesingle')
                    if (key.transType === 'SETTLE') key.transType = this.$t('settlement')
                    if (key.transType === 'TRANSFER') key.transType = this.$t('tranacc')
                    if (key.transType === 'REVERSE') key.transType = this.$t('correct')
                }
                this.selpaydetailsTab = res.data.data.list
            }
        })
    },
    seachPaydet () {
        if (this.transTime !== null) {
            this.selpaydetForm.startTime = this.transTime[0]
            this.selpaydetForm.endTime = this.transTime[1]
        }
        if (this.transTime === null) {
            this.transTime = []
            this.selpaydetForm.endTime = getInitDate(0, 0)
            this.selpaydetForm.startTime = getInitDate(7, 0)
            this.transTime.push(this.selpaydetForm.startTime)
            this.transTime.push(this.selpaydetForm.endTime)
        }
        this.selpaydetForm.pageNum = 1
        this.getPaydet()
    },
    // 监听页面展示数据条数变化
    handleSizeChange (newSize) {
        this.selpaydetForm.pageSize = newSize
        this.getPaydet()
    },
    // 监听总页数变化
    handleCurrentChange (newNum) {
        this.selpaydetForm.pageNum = newNum
        this.getPaydet()
    },
    getDetail (out) {
        window.sessionStorage.setItem('sofpayout', JSON.stringify(out))
        this.$router.push('/sec/sofpayDet')
    }
  },
  mounted () {
      this.selpaydetForm.endTime = getInitDate(0, 0)
      this.selpaydetForm.startTime = getInitDate(7, 0)
      this.transTime.push(this.selpaydetForm.startTime)
      this.transTime.push(this.selpaydetForm.endTime)
      this.getPaydet()
  }
}
</script>

<style lang="less" scoped>
@import './detailsofpay.less';
</style>
